<template>
    <div>
        <el-button class="app-form-footer-btn" type="primary" @click="dialogFormVisible = true"><span>SEO</span></el-button>
        <el-dialog title="SEO信息管理" custom-class="custom-dialog-form" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @closed="dialogClose">
            <el-form ref="dialogForm" :model="seoTemp" label-position="top">
                <el-form-item label="标题" prop="seoHeadline">
                    <el-input v-model="seoTemp.seoHeadline" type="text" placeholder="请输入SEO标题" />
                </el-form-item>
                <el-form-item label="描述" prop="seoDescribe">
                    <el-input v-model="seoTemp.seoDescribe" type="textarea" placeholder="请输入SEO描述" />
                </el-form-item>
                <el-form-item label="关键字" prop="seoKeyword">
                    <el-input v-model="seoTemp.seoKeyword" type="textarea" placeholder="请输入SEO关键字，多个关键字以英文逗号 , 分隔" />
                </el-form-item>
                <div class="el-message-box__btns">
                    <button type="button" class="el-button el-button--default el-button--small" @click="dialogFormVisible = false"><span>取消</span></button>
                    <button type="button" class="el-button el-button--default el-button--small el-button--primary" @click="dialogFormSubmit"><span>保存</span></button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { remakeUrl } from '@/utils'
import { seoSearchObject, seoUpdateSelective } from '@/api/admin/seo'

export default {
    name: 'SeoBtn',
    props: ['seoId', 'seoObj'],
    data: function() {
        return {
            dialogFormVisible: false,
            seoTemp: {
                seoId: this.seoId,
                seoHeadline: '',
                seoDescribe: '',
                seoKeyword: ''
            },
            seoSave: {}
        };
    },
    created() {
        this.searchSeo()
    },
    methods: {
        remakeUrl,
        searchSeo(e) {
            if (this.seoId) {
                seoSearchObject({ seoId: this.seoId }).then(res => {
                    this.seoTemp = res.data[0];
                    this.seoTemp.seoId = this.seoId;
                    this.seoSave = Object.assign({}, res.data[0]);
                });
            } else {
                this.seoTemp = { ...this.seoObj }
            }
        },
        dialogFormSubmit(e) {
            var param = Object.assign({}, this.seoTemp);
            // console.log('seo', param);
            if (this.seoId) {
                seoUpdateSelective(param).then(res => {
                    this.seoSave = Object.assign({}, param);
                    this.$notify({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                });
            } else {
                this.$emit('submit', param)
            }
        },
        dialogClose(e) {
            this.seoTemp = Object.assign({}, this.seoSave);
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
